<template>
  <div>
      <div class="selectBtn">
        <div style="width: 400px;">
        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
            <el-select style="width: 120px;" v-model="selects" slot="prepend" placeholder="请选择">
            <el-option label="姓名" value="姓名"></el-option>
            <el-option label="身份证号码" value="身份证号码"></el-option>
            <el-option label="教师资格证号" value="教师资格证号"></el-option>
            <el-option label="学科" value="学科"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="listTeacherReview(selects)"></el-button>
        </el-input>
        </div>
        <div>
            <el-button type="primary">新增申报</el-button>
            <el-button style="margin-left: 7px;">批量导入</el-button>
        </div>
      </div>
      <div>
          <el-button @click="listTeacherReview">全部</el-button>
          <el-button @click="listTeacherReview('申报中')">申报中</el-button>
          <el-button @click="listTeacherReview('已通过')">已通过</el-button>
          <el-button @click="listTeacherReview('未通过')">未通过</el-button>
          <el-button @click="listTeacherReview('待验证')">待验证</el-button>
      </div>
      <div style="margin-top: 24px;">
        <el-table :header-cell-style="{ background: '#eee', color: '#606266' }" :data="tableData"  max-height="450" style="width: 100%">
        <el-table-column label="教师头像" >
          <template slot-scope="{row}">
            <img width="45px" height="45px" :src="`/api/v1/pri/util/showPic?fileId=${row.headPic}`" alt="">
          </template>
        </el-table-column>
        <el-table-column label="申报类型" >
          <template slot-scope="{row}">
            <p>{{ row.reviewType === 'add' ? '新增' : '注销' }}</p>
          </template>
        </el-table-column>
        <el-table-column label="状态" >
          <template slot-scope="{row}">
            <p>{{ row.reviewStatus === 2 ? '已通过' : row.reviewStatus === 1 ? '申报中' : '未通过' }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" ></el-table-column>
        <el-table-column prop="subjectName" label="任教学科" ></el-table-column>
        <el-table-column prop="teacherTypeName" label="教师资格种类" ></el-table-column>
        <el-table-column prop="teacherTypeNum" label="教师资格证号" ></el-table-column>
        <el-table-column label="申报时间" >
          <template slot-scope="{row}">
            <p>

            {{ formatTime(row.reviewDate * 1000) }}

            </p>
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="原因" ></el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="{row}">
            <el-button type="text" v-if="row.reviewStatus===0">再次申报</el-button>
          </template>
        </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row
            type="flex"
            align="middle"
            justify="end"
            style="margin-top: 20px"
        >
            <el-col :span="11">
            <el-pagination
                background
                layout=" prev, pager, next"
                :total="page.total"
                :page-sizes="[7, 10, 20, 50, 100]"
                :page-size="page.pageSize"
                @current-change="changePage"
                :current-page.sync="page.currentPage"
            ></el-pagination>
            </el-col>
        </el-row>
      </div>
  </div>
</template>

<script>
import { listTeacherReview } from '@/api'
export default {
  data () {
    return {
      selects: '',
      input3: '',
      lastPage: false,
      page: {
        // 分页数据
        total: 0, // 总条数
        currentPage: 1, // 默认的页码 是第一个页  决定了当前页码是第几页
        pageSize: 9 // page-size的默认值是10条
      },
      tableData: [
      ]
    }
  },
  created () {
    this.listTeacherReview()
  },
  methods: {
    // 当前页
    changePage (val) {
      console.log(val)
      const { lastPage } = this
      if (lastPage) {
        this.$message.warning('最后一页')
        return false
      }
      this.page.currentPage = val
      this.listTeacherReview(null)
    },
    async listTeacherReview (type) {
      let data = {}
      const { input3 } = this
      switch (type) {
        case '姓名':
          data = { name: input3 }
          break
        case '身份证号码':
          data = { documentNum: input3 }
          break
        case '教师资格证号':
          data = { teacherTypeId: input3 }
          break
        case '学科':
          data = { teacherTypeNum: input3 }
          break
        case '申报中':
          data = { reviewStatus: 1 }
          break
        case '已通过':
          data = { reviewStatus: 2 }
          break
        case '未通过':
          data = { reviewStatus: 0 }
          break
        case '待验证':
          data = { reviewStatus: 1 }
          break

        default:
          break
      }
      const ser = await listTeacherReview({ reviewStatus: null, page: this.page.currentPage, ...data })
      console.log(ser)
      if (ser?.code === 200) {
        const { list, total, lastPage } = ser.data
        this.tableData = list
        this.page.total = total
        this.lastPage = lastPage
      }
    },
    formatTime (item) {
      return this.$formatTime(item)
    }
  }
}
</script>

<style lang="less" scoped>
    .el-button+.el-button {
        margin: 0;
    }
    .selectBtn {
        display: flex;
        margin-top: 15px;
        margin-bottom: 24px;
        align-items: center;
        justify-content: space-between;
    }
</style>
